<template>
  <div>
    <van-nav-bar
      title="优惠券"
      right-text="使用规则"
      left-arrow
      @click-left="$router.back(-1)"
    />
    <van-search shape="round" placeholder="请输入兑换码" />
    <van-tabs v-model="activeName">
      <van-tab title="未使用" name="a" class="vant">
        <van-icon name="cash-on-deliver" size="80" color="#4444" />
        <span>没有可以使用的优惠券</span>
      </van-tab>
      <van-tab title="即将到期" name="b" class="vant">
        <van-icon name="cash-on-deliver" size="80" color="#4444" />
        <span>没有将要到期的优惠券</span></van-tab
      >
      <van-tab title="已失效" name="c" class="vant">
        <van-icon name="cash-on-deliver" size="80" color="#4444" />
        <span>没有已失效的优惠券</span></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "a",
    };
  },
};
</script>

<style lang="scss" scoped>
.van-tab__pane {
  padding: 100px;
  text-align: center;
}
.vant {
  display: flex;
  flex-direction: column;
}
span {
  padding-top: 30px;
  color: #4449;
}
</style>
